<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
 	String path = request.getContextPath();
 	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 	request.setAttribute("path", path);
 	request.setAttribute("jsPath", path+"/js");
 	request.setAttribute("cssPath", path+"/css");
 	request.setAttribute("imagePath", path+"/image");
 %>

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <base href="<%=basePath%>">
<title>新增用户角色</title>
  <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
 
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- css调用 -->
<link href="${cssPath }/bootstrap.min.css?v=3.4.0" rel="stylesheet">
<link href="${cssPath }/font-awesome.css?v=4.3.0" rel="stylesheet">

<!-- Morris -->
<link href="${cssPath }/morris-0.4.3.min.css" rel="stylesheet">
<!-- Gritter -->
<link href="${cssPath }/jquery.gritter.css" rel="stylesheet">
<link href="${cssPath }/animate.css" rel="stylesheet">
<link href="${cssPath }/style.css?v=2.2.0" rel="stylesheet">

<!-- 页面js调用部分 -->
<!-- Mainly scripts -->
	<script src="${jsPath }/jquery-2.1.1.min.js"></script>
	<script src="${jsPath }/bootstrap.min.js?v=3.4.0"></script>
	<script src="${jsPath }/jquery.metisMenu.js"></script>
	<script src="${jsPath }/jquery.slimscroll.min.js"></script>
	<script src="${jsPath }/hplus.js?v=2.2.0"></script>
	<script src="${jsPath }/pace.min.js"></script>
<style type="text/css">  
 
  	  table {
          margin:10px 0px 20px 10px;
          border-collapse:collapse;
      }
      thead {
          background:#CCCCCC;
          display:block
      }
      tbody {
          height:180px;
          overflow-y:scroll;
          display:block;
      }
   	.wt10{
   			height:30px;;
   			width:40px;
          	min-width:40px;
          	max-width:40px;
   		}
      .wt20{
          width:100px;
          min-width:100px;
          max-width:100px;
      }
      .wt30{
          width:150px;
          min-width:150px;
          max-width:150px;
      }
      .wt40{
          width:150px;
          min-width:150px;
          max-width:150px;
      }
      .wt50{
          width:150px;
          min-width:150px;
          max-width:150px;
      } 
      .wt60{
          width:150px;
          min-width:150px;
          max-width:150px;
      }

</style>  
</head>

<script src="${jsPath}/jquery.min.js"></script>
<script type="text/javascript">
	
	function search(){
		$("#pageNum").val(1);
		$('#userroleSearchForm').submit();
	}
	
	function goPage(pageNum){
		var toolPage=parseInt($("#toolPage").text());
		if(parseInt(pageNum)<=toolPage && parseInt(pageNum)>0){
			$("#pageNum").val(pageNum);
		}
		$('#userroleSearchForm').submit();
	}
	
	function addUserrole(){
		var roleId=$("select[name=roleId]").val();
		var staffId=[];
		
		if(roleId==0){
			alert("请选择角色！");
			return;
		}
		$("input[name=select]:checked").each(function(){
			staffId.push($(this).val());
		});
		if(staffId.length<=0){
			alert("请选择用户！");
			return;
		}
		var userroleForm = $("#userroleForm");
		var url=userroleForm.attr("action");
		var params ="roleId="+roleId+"&staffId="+staffId;
		console.info(params);
		$.post(url,params,function($data){
			console.info($data);
			var code = $data.code;
			var message = $data.message;
			if(code==1){
				//添加成功
				//做你想做的事情，提示成功，跳转页面
				alert("添加成功！");
				window.opener.search();
				window.close(); 
				
			}else{
				//错误处理，根据你的需求文档处理
				alert(message);
			}
		},"json");
	
	}
	
	
	
	$(function(){
	
		$("select[name=roleId]").change(function(){
			var roleId=$("select[name=roleId]").val();
			var sysroleName=$("select[name=roleId]").find("option:selected").text();
			$("input[name=roleId]").val(roleId);
			$("input[name=sysroleName]").val(sysroleName);
			$('#userroleSearchForm').submit();
		});
		
		$("input[name=allSelect]").click(function(){
            if($(this).prop("checked")==true){
                $("input[name=select]").prop("checked","true");
            }else{
                $("input[name=select]").prop("checked","");
            }
        }) ;
	
		
	});
	
	
</script>


<body>
	<div id="wrapper">
		<!-- 左边导航 -->
		<%@ include file="../share/leftMenu.jsp" %>
				
		<div id="page-wrapper" class="gray-bg dashbard-1">
		<!-- 头部 -->
		<%@ include file="../share/head.jsp" %>
		
		
		
      <!--------------------------
        | 请将正文内部分写在这里 |
        -------------------------->
         <!-- 正文开始 -->

<div class="box">
<h2>新增用户角色</h2>
	<div class="box_context">
		<c:if test="${message!=null}">
			<span style="color: red">${message}</span>
		</c:if>
		
      	<label>角色名：</label>
      	<select name="roleId">
      	<c:if test="${null==userroleVo.sysroleName || ''==userroleVo.sysroleName }">
      		<option value="0">--请选择--</option>
      	</c:if>
      	 <c:if test="${''!=userroleVo.sysroleName && null!=userroleVo.sysroleName }">
      		<option value="${userroleVo.roleId}">${userroleVo.sysroleName}</option>
      	</c:if>
      		<c:forEach var="sysrole" items="${sysroleList}">  
      			<option value="${sysrole.roleId }">${sysrole.name}</option>
      		</c:forEach>
      	</select>
		
		<p>请选择用户：</p>
		<form id="userroleSearchForm" action="${path}/admin/userrole/showAdd" method="post">
			<label>中文名：</label>
			<input type="hidden" name="sysroleName" value="${userroleVo.sysroleName}"/>
			<input type="hidden" name="roleId" value="${userroleVo.roleId}"/>
			<input type="text" name="staffName" value="${userroleVo.staffName}"/>
			<input type="hidden" id="pageNum" name="pageNum" value="${userroleVo.pageNum}"/> 
			<input type="button" value="查询" onclick="search()"/>
		</form>
		<div  class="box_context_left">
			<table class="tablediv" id="myTable" border="1"> 
	        <thead>
	          <tr>
	            <td class="wt10"><input type="checkbox" name="allSelect">全选</td>
	            <td class="wt20">序号</td>
	            <td class="wt30">账户</td>
	            <td class="wt40">中文名</td>
	            <td class="wt50">英文名</td>
	            <td class="wt60">工作年限</td>
	          </tr> 
	        </thead>
	        <tbody id="tb">
	        <c:forEach var="staff" items="${staffList}" varStatus="status">
		          <tr>
		            <td class="wt10"><input type="checkbox" name="select" value="${staff.staffId}"></td>
		            <td class="wt20">${status.index+1}</td>
		            <td class="wt30">${staff.staffNum }</td>
		            <td class="wt40">${staff.chnName}</td>
		            <td class="wt50">${staff.surName}</td>
		            <td class="wt60">${staff.ageLimit }</td>
		          </tr> 
		   </c:forEach>
	          </tbody>
	       </table>
	       <a href="javaScript:void(0)"  onclick="goPage(${userroleVo.pageNum-1})">上一页</a>
			${userroleVo.pageNum}/<span id="toolPage">${toolPage}</span>页
			<a href="javascript:void(0)" onclick="goPage(${userroleVo.pageNum+1})">下一页</a>
			
			第<input id="myPageNum" value="${userroleVo.pageNum}"/>页
			<a href="javaScript:void(0)" onclick="goPage($('#myPageNum').val())">跳转</a>
			<br>
      </div> 
      
      <form action="${path }/admin/userrole/add" method="post" id="userroleForm">
      	<input type="button" value="确认" onclick="addUserrole()"/>
      	<input type="reset" value="重置"/>
      </form>
      
	</div>

</div>

</body>
</html>